<template>
  <section>
    <canvas ref="cav" class="border"></canvas>
  </section>
</template>

<script>
import {getRandomColor} from "@/utils/tools";

/**
 *@Description:画圆圈
 *@author ZY
 *@date 2022/11/20 21:38
 */
export default {
  name: "canvas-circle",
  data() {
    return {}
  },
  mounted() {
    this.main()
  },
  methods: {
    main() {
      let that = this
      //canvas 画圆圈
      let circleCanvas = this.$refs.cav
      circleCanvas.height = 130
      circleCanvas.width = 600
      let circleCtx = circleCanvas.getContext('2d')
      for (let i = 1; i <= 10; i++) {
        //空心圆
        this.drawCircle(circleCtx, [20 + (45 * i), 40], [0, 36 * i], 20, getRandomColor(), false, false)
        //实心圆
        this.drawCircle(circleCtx, [20 + (45 * i), 105], [0, 36 * i], 20, getRandomColor(), true, false)

        circleCtx.fillText(`${36 * i}°`, 10 + (45 * i), 45)
        circleCtx.fillText(`${36 * i}°`, 10 + (45 * i), 145)
      }
    },

    /**
     * @Description: 圆生成器
     * @author ZY
     * @date 2022/11/19 22:22
     * @param {Object} ctx canvas上下文
     * @param {Array} pointArr 圆心坐标 [x,y]
     * @param {Array} angleArr 开始和结束的角度 [start,end]
     * @param {Number} r 半径
     * @param {String=} color 颜色 默认黑色
     * @param {boolean=false} isSolid (可选值 是否空心)
     * @param {boolean=true} direction (可选值) 是否逆时针
     */
    drawCircle(ctx, pointArr, angleArr, r, color, isSolid = false, direction = true) {
      // 角度转弧度公式：1° =Math.PI / 180
      ctx.beginPath()
      isSolid && ctx.moveTo(pointArr[0], pointArr[1]) //起点 默认是圆心
      ctx.arc(pointArr[0], pointArr[1], r, angleArr[0] * (Math.PI / 180), angleArr[1] * (Math.PI / 180), direction)
      if (isSolid) {
        ctx.fillStyle = color
        ctx.fill()
      } else {
        ctx.strokeStyle = color
        ctx.stroke()
      }
      ctx.closePath()
    },
  }
}
</script>

<style lang="scss" scoped>
.border {
  border: 1px solid #dbdbdb;
  border-radius: 5px;
  overflow: hidden;
}
</style>
